<template>
	<view>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">收货人:</view>
			<input class="py-1 font-md flex-1 text-dark" type="text" value="" 
			v-model="name"/>
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">手机号码:</view>
			<input class="py-1 font-md flex-1 text-dark" type="text" value="" 
			v-model="phone"/>
		</view>
		<divider></divider>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">所在地区:</view>
			<input class="py-1 font-md flex-1 text-dark" type="text" :value="path" 
			:disabled="true"
			@click="showMulLinkageThreePicker"
			placeholder="请选择所在地区"
			/>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" 
			:pickerValueDefault="pickerValue"
			@onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">详细地址:</view>
			<input class="py-1 font-md flex-1 text-dark" type="text" value=""
			 v-model="detailPath"/>
		</view>
		<divider></divider>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">设为默认地址:</view>
			<switch :checked="isdefault" 
			@change="isdefault = $event.detail.value" 
			class="ml-auto mr-1"
			color="#FD6801"/>
		</view>
		<view class="p-3">
			<view class="text-center w-100 main-bg-color text-white font-md rounded py-2"
			hover-class="main-bg-hover-color"
			@click="submit">
				<text>保存</text>
			</view>
		</view>
		
		<!-- 三级城市联动 -->

	</view>
</template>

<script>
	import mpvueCityPicker from "@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue"
	import { mapActions} from "vuex"
	
	export default {
		components: {
			mpvueCityPicker,
		},
		
		//页面加载时
		onLoad(e) {
			if (e.data) {
				let data = JSON.parse(e.data)
				console.log(data)
				let result = data.item
				this.name = result.name
				this.phone = result.phone
				this.path = result.path
				this.detailPath = result.detailPath
				this.isdefault = result.isdefault
				this.isEdit = true
				this.index = data.index
				uni.setNavigationBarTitle({
					title:'修改收货地址'
				})
			}
		},
		
		data() {
			return {
				themeColor: '#007AFF',
				path: '',
				pickerValue: [0,0,1],
				
				name:"",
				phone:"",
				detailPath:"",
				isdefault:false,
				
				isEdit: false,
				index: -1
			}
		},
		
		//点击返回按钮
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
				return true
			}
		},
		
		//页面卸载时触发
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		
		methods: {
			...mapActions(['updatePathAction', 'addPathAction']),
			//提交
			submit() {
				//验证表单
				//修改
				if (this.isEdit) {
					this.updatePathAction({
						index: this.index,
						item: this.getForm()
					})
					uni.showToast({
						title: '修改成功'
					})
				} else {
					//提交
					this.addPathAction(this.getForm())
					uni.showToast({
						title: '创建成功'
					})
				}
				uni.navigateBack({
					delta: 1
				})
			},
			
			//获取表单内容
			getForm() {
				return {
					name: this.name,
					phone: this.phone,
					path: this.path,
					detailPath: this.detailPath,
					isdefault: this.isdefault
				}
			},
			
			//三级联动确定
			onConfirm(e) {
				this.path = e.label
				this.pickerValue = e.value
			},
			//三级联动显示
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			}
		}
	}
</script>

<style>
page {
	background-color: #EEEEEE;
}
</style>
